<template>
    <div id="app">
        <nav>
            <div class="logo">天天向上</div>
            <label for="btn" class="icon">
                <span class="fas fa-bars"></span>
            </label>
            <input type="checkbox" class="menu-checkbox" id="btn">
            <ul>
                <li>
                    <label for="btn-1" class="show">数学 +</label>
                    <a href="#">数学</a>
                    <input type="checkbox" class="menu-checkbox" id="btn-1">
                    <ul>
                        <li><router-link to="/four_operation">四则运算</router-link></li>
                        <li><router-link to="/fenshu">分数</router-link></li>
                        <li><router-link to="/box">体</router-link></li>
                        <li><router-link to="/distance">路程</router-link></li>
                        <li><router-link to="/matrix">方阵</router-link></li>
                        <li><router-link to="/permute1">排列</router-link></li>
                        <li><router-link to="/sum_diff">和差问题</router-link></li>
                        <li><router-link to="/ruler">尺子</router-link></li>
                        <li><router-link to="/decimal">小数</router-link></li>
                        <li><router-link to="/color">颜色抽奖</router-link></li>
                        <li><router-link to="/axis">位置</router-link></li>
                        <li>
                            <label for="btn-3" class="show">经典 +</label>
                            <a href="#">经典 <span class="fa fa-plus"></span></a>
                            <input type="checkbox" class="menu-checkbox" id="btn-3">
                            <ul>
                                <li><router-link to="/card">猜牌</router-link></li>
                                <li><router-link to="/graph">鸡兔同笼</router-link></li>
                                <li><router-link to="/yunchouxue">运筹学</router-link></li>
                                <li><router-link to="/sudo">数独</router-link></li>
                            </ul>
                        </li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </li>
                <li>
                    <label for="btn-2" class="show">杂项 +</label>
                    <a href="#">杂项</a>
                    <input type="checkbox" class="menu-checkbox" id="btn-2">
                    <ul>
                        <li><router-link to="/name_check">名单检查</router-link></li>
                        <li><router-link to="/sun">日月地</router-link></li>
                        <li><router-link to="/cluster">聚类</router-link></li>

<!--                        <li>-->
<!--                            <label for="btn-3" class="show">More +</label>-->
<!--                            <a href="#">More <span class="fa fa-plus"></span></a>-->
<!--                            <input type="checkbox" class="menu-checkbox" id="btn-3">-->
<!--                            <ul>-->
<!--                                <li><a  href="#">Submenu-1</a></li>-->
<!--                                <li><a  href="#">Submenu-2</a></li>-->
<!--                                <li><a  href="#">Submenu-3</a></li>-->
<!--                            </ul>-->
<!--                        </li>-->
                    </ul>
                </li>
                <li>
                    <label for="btn-32" class="show">音频 +</label>
                    <a href="#">音频</a>
                    <input type="checkbox" class="menu-checkbox" id="btn-32">
                    <ul>
                        <li><router-link to="/audio">音频</router-link></li>
                    </ul>
                </li>
                <li><router-link to="/englishPage">英语</router-link></li>
            </ul>
        </nav>

        <!--      <span class="my-link">-->
        <!--          <router-link to="/xss">XSS</router-link>-->
        <!--      </span>-->
        <!--      <span class="my-link">-->
        <!--          <router-link to="/english42">英语四下</router-link>-->
        <!--      </span>-->
        <!-- 对应的组件内容渲染到router-view中 -->
        <router-view style="margin-top:20px;padding-left:20px;min-height: 800px;"></router-view>
        <!--      <el-row>-->
        <!--          <el-col align="right">-->
        <!--            <el-button type="primary" @click="toShowMyQuesLib">我的题库</el-button>-->
        <!--          </el-col>-->
        <!--      </el-row>-->
        <el-dialog
                title="我的题库"
                :visible.sync="showMyQuesLib" :close-on-click-modal="false"
                width="80%">
            <div>
                <div v-for="(ques, quesIndex) in myQuesLib" :key="quesIndex">
                    {{quesIndex + 1}}、{{ques.desc}}
                    <el-button type="primary" @click="deleteMyQues(quesIndex)">删除</el-button>
                    <hr/>
                </div>
                <div v-show="false" id="printDiv">
                    <div v-for="(ques, quesIndex) in myQuesLib" :key="quesIndex">
                        {{quesIndex + 1}}、{{ques.desc}}
                        <hr/>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="toPrint">打印</el-button>
            <el-button @click="toDeleteAll" v-show="myQuesLib && myQuesLib.length > 0">清空题库</el-button>
            <el-button type="primary" @click="showMyQuesLib = false">关闭</el-button>
          </span>
        </el-dialog>

        <el-dialog
                title="登录"
                :visible.sync="loginDialogVisible"
                width="30%">
            <el-form>
                <div v-if="isAuthUser()">
                    已登录
                    <el-button type="primary" @click="logout">登出</el-button>
                </div>
                <div v-else>
                    <el-form-item label="用户名：">
                        <el-input v-model="loginForm.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：">
                        <el-input placeholder="请输入密码" v-model="loginForm.password" show-password></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="loginDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="login" :loading="loginForm.loading">确 定</el-button>
          </span>
        </el-dialog>

        <el-row style="margin-top:20px;padding-bottom: 10px;">
            <el-col align="center">
                <a href="https://beian.miit.gov.cn" target="_blank" style="margin-right:5px;">浙ICP备2021000260号-1</a>
                计算机模拟，结果可能会有适当误差。使用中发现问题或建议，<span @dblclick="toLogin">可以</span>联系作者: zgq456@qq.com
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import axios from "axios";
    import moment from 'moment'

    export default {
        components: {},
        provide() {
            return {
                isAuthUser: this.isAuthUser
            }
        },
        data() {
            return {
                loginDialogVisible: false,
                showMyQuesLib: false,
                myQuesLib: [],
                loginForm: {
                    userName: '',
                    password: '',
                    loading: false,
                },
                authData: {},
                authDataKey: 'authDataKey',
                nowStr: null,
            }
        },
        methods: {
            logout() {
                this.$localStorage.remove(this.authDataKey)
                this.authData = null
            },
            isAuthUser() {
                return this.authData && this.authData.valid && this.nowStr < this.authData.expired_time
            },
            toLogin() {
                this.loginDialogVisible = true
            },
            async login() {
                let postData = {
                    user_name: this.loginForm.userName,
                    password: this.loginForm.password,
                }
                let response = await axios.post('/login', postData)
                // console.log('response11:', response)
                if (!response.data.valid) {
                    this.$message.error('登录失败')
                    this.authData = null
                } else {
                    this.authData = response.data
                    this.loginDialogVisible = false
                    this.$localStorage.set(this.authDataKey, this.authData, 24 * 60 * 60 * 1000)
                }

            },
            toPrint() {
                this.$htmlToPaper('printDiv')
            },
            toDeleteAll() {
                this.$confirm('确定要删除所有题目吗？')
                    .then(_ => {
                        console.log('_', _)
                        this.myQuesLib = []
                        localStorage.setItem('quesLib', JSON.stringify(this.myQuesLib))
                    })
                    .catch(_ => {
                        console.log('_', _)
                    });
            },
            toShowMyQuesLib() {
                this.showMyQuesLib = true
                let quesLib = localStorage.getItem('quesLib')
                this.myQuesLib = quesLib ? JSON.parse(quesLib) : []
            },
            deleteMyQues(quesIndex) {
                this.myQuesLib.splice(quesIndex, 1)
                localStorage.setItem('quesLib', JSON.stringify(this.myQuesLib))
            },
            refreshTime() {
                this.nowStr = moment().format('YYYY-MM-DD HH:mm:ss')
                setTimeout(() => {
                    this.refreshTime();
                }, 60000);
            },
        },
        mounted() {
            /*
            if (window.location.href.indexOf("https://") >= 0) {
                window.location = window.location.href.replace('https://', 'http://')
            }
            */

            this.refreshTime()
            let authData = this.$localStorage.get(this.authDataKey)
            if (authData) {
                this.authData = authData
            }
            // console.log('here:',  $('.icon'))
            // $('.icon').click(function(){
            //     $('span').toggleClass('cancel');
            // })
        }
    }
</script>

<style>
    #app {
        font-family: Helvetica, sans-serif;
        /*text-align: center;*/
    }

    .my-link {
        font-size: 20px;
        margin-right: 10px;
    }

    .el-scrollbar .el-scrollbar__bar {
        opacity: 1 !important;
    }


    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }
    :root{
        --yellow-color:#ffc947;
        --black-color:#1b1b1b;
        --white-color:#fff;
    }
    .menu-checkbox {
        display:none
    }
    nav{
        background:var(--black-color);
    }
    nav:after{
        content:'';
        clear:both;
        display:table;
    }
    nav .logo{
        float:left;
        color:var(--white-color);
        font-size: 27px;
        font-weight: 600;
        line-height: 70px;
        padding-left: 60px;
    }
    nav ul{
        float:right;
        margin-right:40px;
        list-style: none;
        position:relative;
    }
    nav ul li{
        float:left;
        display:inline-block;
        background:var(--black-color);
        margin:0 5px;
    }
    nav ul li a{
        color:var(--white-color);
        line-height: 70px;
        text-decoration: none;
        font-size: 18px;
        padding:8px 15px;
        transition: 0.3s all ease;
    }
    nav ul li a:hover{
        color:var(--yellow-color);
        border-radius: 5px;
        box-shadow: 0 0 5px var(--yellow-color), 0 0 10px var(--yellow-color);
    }
    nav ul ul li a:hover{
        box-shadow: none;
    }
    nav ul ul{
        position:absolute;
        top:90px;
        z-index: 100;
        border-top:3px solid var(--yellow-color);
        opacity:0;
        visibility:hidden;
        transition: top .3s;
    }
    nav ul ul ul{
        border-top:none;
    }
    nav ul li:hover > ul{
        top:70px;
        opacity:1;
        visibility:visible;
    }
    nav ul ul li{
        position:relative;
        margin:0px;
        width:150px;
        float:none;
        display:list-item;
        border-bottom:1px solid rgba(0,0,0,0.3);
    }
    nav ul ul li a{
        line-height: 50px;
    }
    nav ul ul ul li{
        position:relative;
        top:-60px;
        left:150px;
    }
    .show,.icon{
        display:none;
    }
    .fa-plus{
        font-size:15px;
        margin-left:40px;
    }
    .content{
        position:relative;
    }
    .content::before{
        content:'';
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-repeat:no-repeat;
        background-position:center;
        background-size: cover;
        width:100%;
        height:calc(100vh - 70px);
    }
    .content::after{
        content:'';
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        height:calc(100vh - 70px);
        background-color: rgba(0,0,0,.50);
    }

    @media all and (max-width:968px){
        nav ul{
            margin-right:0px;
            float:left;
        }
        nav .logo{
            padding-left:30px;
            width:100%;
        }
        .show + a, ul{
            display:none;
        }
        nav ul li, nav ul ul li{
            display:block;
            width:100%;
        }
        nav ul li a:hover{
            box-shadow: none;
        }
        .show{
            display:block;
            color:var(--white-color);
            font-size: 18px;
            padding:0 12px;
            line-height: 70px;
            cursor:pointer;
        }
        .show:hover{
            color:var(--yellow-color);
        }
        .icon{
            display:block;
            color:var(--white-color);
            position:absolute;
            top:0;
            right:40px;
            line-height: 70px;
            cursor:pointer;
            font-size: 25px;
        }
        nav ul ul{
            top:70px;
            border-top:0px;
            float:none;
            position:static;
            display:none;
            opacity:1;
            visibility:visible;
        }
        nav ul ul a{
            padding-left: 40px;
        }
        nav ul ul ul a{
            padding-left: 80px;
        }
        nav ul ul ul li{
            position:static;
        }
        [id^=btn]:checked + ul{
            display:block;
        }
        nav ul ul li{
            border-bottom:0px;
        }
        span.cancel:before{
            content:'\f00d';
        }
    }



</style>
